import React from 'react';
import { Button, Form, Input, Spin } from 'antd';

import IntroEditor from '@/components/IntroEditor'
import GoodsType from './type'
import api from '@/network/api';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const GoodsPub: React.FC = () => {
    const form = Form.useForm()[0]
    const onFinish = (values: GoodsType) => {
      if (values.brief) {
        api.addGoods(values)
        // 重置数据
        form.resetFields()
      }
    }
    return (
        <Form
          form={form}
          name="nest-messages"
          onFinish={onFinish}
          style={{ maxWidth: 1200,marginTop: '24px',marginLeft: '24px' }}
        >
          <Form.Item<GoodsType>
            name="name"
            label="商品名称"
            rules={[
              {
                required: true,
                message: '请输入商品名称',
                max: 10,
                min: 2,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item<GoodsType>
            name="bcname"
            label="商品分类"
            rules={[
              {
                required: true,
                message: '请输入商品分类',
                max: 10,
                min: 2,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item<GoodsType>
            name="weight"
            label="商品重量"
            rules={[
              {
                required: true,
                message: '请输入正确的商品重量'
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item<GoodsType>
            name="brief"
            label="商品简介"
          >
            <IntroEditor />
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button style={{ marginLeft: '24px' }} htmlType="reset">
              重置
            </Button>
          </Form.Item>
        </Form>
    )
}
export default GoodsPub